<!-- 新都特色 -->
<template>
    <AllOut>
        <div style="position: relative;">
            <TopNav :show_links="true"></TopNav>
            <div class="navHader">
                <Nav :nav_value="4"></Nav>
            </div>
            <div class="content_out index_content" style="padding-top:140px;">
                <b-container fluid>
                    <div class="dindu_img flex">
                        <img class="xindub" src="/img/xindub.png" alt="" />
                        <div class="xindu_ele3">
                            <el-carousel height="584px">
                                <el-carousel-item v-for="(item, key) in xinduDatas.files" :key="key"
                                    indicator-position="none">
                                    <img class="index_top_bg_img" :src="item.url" alt="">
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                        <!-- <img class="xindu_ele3" src="/img/ele3.png" alt="" /> -->
                        <div class="xindu_div">
                            <div class="xindu_div_main">
                                <p class="xindu_div_main_title fontz fonts24 fontw700">{{ xinduDatas.characteristicTitle }}
                                </p>
                                <div class="xindu_div_main_s">
                                    <p class="fonts18 fontz">
                                        {{ xinduDatas.characteristicContents }}
                                    </p>
                                </div>

                            </div>
                        </div>
                    </div>
                    <b-row v-for="(item, index) in xinduDatas.items" :key="index">
                        <b-col md="12" sm="12" class="">
                            <div class="xindu_bottom_main">
                                <div class="flex jcsb ">
                                    <p class="xindu_div_main_title fontz fonts24 fontw700">新都简介</p>
                                    <div class="flex">
                                        <el-button icon="el-icon-arrow-left" style="width: 90px;"
                                            @click="imageInd(item)"></el-button>
                                        <el-button type="primary" icon="el-icon-arrow-right" style="width: 90px;"
                                            @click="imageAdd(item)"></el-button>
                                    </div>
                                </div>
                                <div class="xindu_bottom_main_top ">
                                    <img :src="items.url" alt="" v-for="(items, indexs) in item.imageData" :key="indexs" />
                                </div>
                            </div>

                        </b-col>

                    </b-row>

                </b-container>
            </div>
        </div>
    </AllOut>
</template>

<script>
import { xinduCharacteristic } from "@/api/index"
export default {
    async asyncData() {
        const xinduData = await xinduCharacteristic()
        return { xinduData }
    },
    data() {
        return {
            xinduData: {},
            xinduDatas: {},
        }
    },
    created() {
        console.log("新都配置：", this.xinduData);
        this.info()
    },
    methods: {
        imageFun(data) {
            return data.split(",")
        },
        info() {
            this.xinduDatas = this.xinduData.data
            this.xinduDatas.items.forEach(element => {
                let array=element.files
                element.imageData = array.slice(0, 3)
                element.iamgeValue = 3
            });
            console.log(this.xinduDatas.items);
        },
        imageAdd(item) {
            if (item.iamgeValue < item.files.length) {
                item.iamgeValue++
                item.imageData = item.files.slice(item.iamgeValue - 3, item.iamgeValue)
            }
        },
        imageInd(item) {
            if (item.iamgeValue > 3) {
                item.iamgeValue--
                item.imageData = item.files.slice(item.iamgeValue - 3, item.iamgeValue)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.navHader {
    position: absolute;
    width: calc(100% + 10px);
    padding: 0 160px;
    top: 140px;
    left: -5px;
    z-index: 999;
}

.dindu_img {
    margin-top: 23px;
    position: relative;
    margin-bottom: 93px;

    .xindu_ele3 {
        position: absolute;
        top: 108px;
        left: 108px;
        width: 466px;
        height: 584px;
        z-index: 9;

        .index_top_bg_img {
            width: 100%;
            height: 100%;
        }
    }

    .xindub {
        width: 413px;
        height: 376px;
    }

    .xindu_div {
        width: calc(100% - 361px);
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        height: 692px;
        background: #f8f9fa;
        position: relative;

        .xindu_div_main {
            position: absolute;
            top: 108px;
            left: 285px;

            .xindu_div_main_title {
                color: #3D3D3D;
                position: relative;
                width: 96px;

                &::after {
                    content: "";
                    position: absolute;
                    bottom: -18px;
                    left: 0;
                    width: 100%;
                    height: 4px;
                    background: #2F6CBC;
                    border-radius: 0px 0px 0px 0px;
                    opacity: 1;
                }
            }

            .xindu_div_main_s {
                width: 90%;
                margin-top: 72px;

                p {
                    margin-top: 30px;

                    &:nth-child(1) {
                        margin-top: 0;
                    }
                }
            }
        }
    }
}

.xindu_bottom_main {
    margin-bottom: 50px;

    .xindu_div_main_title {
        color: #3D3D3D;
        position: relative;
        width: 96px;

        &::after {
            content: "";
            position: absolute;
            bottom: -18px;
            left: 0;
            width: 100%;
            height: 4px;
            background: #2F6CBC;
            border-radius: 0px 0px 0px 0px;
            opacity: 1;
        }
    }

    .xindu_bottom_main_top {
        margin-top: 48px;
        display: grid;
        grid-template-columns: repeat(3,31.5%);
        column-gap: 2.75%;
        img {
            width:100%;
            height: 300px;
        }
    }
}
</style>